﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<html>
<head>
    <link href="~/css/table.css" rel="stylesheet" />
    <title>无标题文档</title>
</head>
<body>
    <div id="app">
        <el-form name="configfilefirstkindForm" method="post" ref="ruleFormRef"
                 :model="ruleForm"
                 :rules="rules"
                 label-width="120px"
                 class="demo-ruleForm">
            <table width="100%">
                <tr>
                    <td>
                        <font color="black">
                            您正在做的业务是：人力资源--薪酬标准管理--薪酬标准登记复核
                        </font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <el-radio-group v-model="ruleForm.checkStatus" v-on:change="radio1()">
                            <el-radio value="通过复核">通过</el-radio>
                            <el-radio value="未通过复核">不通过</el-radio>
                        </el-radio-group>
                        &nbsp;
                        &nbsp;
                        <el-button v-on:click="add()">提交</el-button>
                        <el-button v-on:click="close()">返回</el-button>
                    </td>
                </tr>
            </table>
            <table id="stable" width="100%" border="1" cellpadding=0 cellspacing=1
                   bordercolorlight=#848284 bordercolordark=#eeeeee
                   class="TABLE_STYLE1">
                <tr>
                    <td width="74" class="TD_STYLE1">
                        薪酬标准编号
                    </td>
                    <td width="168" class="TD_STYLE2">
                        <el-form-item prop="standardId" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.standardId" class="INPUT_STYLE2" readonly />
                        </el-form-item>
                    </td>
                    <td width="83" class="TD_STYLE1">
                        薪酬标准名称
                    </td>
                    <td width="171" class="TD_STYLE2">
                        <el-form-item prop="standardName" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.standardName" class="INPUT_STYLE2" />
                        </el-form-item>
                    </td>
                    <td width="170" class="TD_STYLE1">
                        薪酬总额
                    </td>
                    <td width="138" class="TD_STYLE2">
                        <el-form-item prop="salarySum" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.salarySum"
                                      placeholder="Please input"
                                      :formatter="(value) => `${parseFloat(value).toFixed(2)}`"
                                      :parser="(value) => `${parseFloat(value).toFixed(2)}`" class="INPUT_STYLE2" readonly />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        制定人
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="designer" style="margin-left: 0px;">
                            @* <el-input v-model="ruleForm.designer" class="INPUT_STYLE2" /> *@
                            <el-select v-model="ruleForm.designer" placeholder="请选择制定人" style="width: 100%">
                                <el-option v-for="item in userData"
                                           :label="item.uTrueName"
                                           :value="item.uTrueName" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        复核人
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="checker" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.checker" class="INPUT_STYLE2" />
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        复核时间
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="checkTime" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.checkTime" class="INPUT_STYLE2" readonly />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        复核意见
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-form-item prop="checkComment" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.checkComment"
                                      :rows="4"
                                      type="textarea" class="TEXTAREA_STYLE1" style="width: 80%" />
                        </el-form-item>
                    </td>
                </tr>

                <tbody>
                    <tr class="TD_STYLE1">
                        <td align="center">
                            序号
                        </td>
                        <td colspan="3">
                            薪酬项目名称
                        </td>
                        <td>
                            金额
                        </td>
                        <td colspan="3">
                            &nbsp;
                        </td>
                    <tr class="TD_STYLE2" v-for="(ss,index) in checkedCitiesList" style=" border: 1px solid #000;">
                        <td align="center">
                            {{ss.itemId}}
                            <input type="hidden" name="details[0].itemId" value="63">
                        </td>
                        <td colspan="3">
                            {{ss.itemName}}
                        </td>
                        <td>
                            <el-input v-model="ss.salary" class="INPUT_STYLE2" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
                        </td>
                        <td colspan="3">
                            &nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>
            <p>
                &nbsp;
            </p>
        </el-form>

        <el-dialog v-model="dialogVisible"
                   title=""
                   width="500"
                   :before-close="handleClose">
            <span>通过复核成功！</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" v-on:click="reset()">
                        返回
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</body>
</html>
<script lang="ts" setup>
    window.userTrueName = '@ViewBag.UserTrueName'; // 将ViewBag的值赋给全局变量，方便Vue实例获取
    const { createApp, ref, reactive, computed, watchEffect} = Vue
    const { ElMessage } = ElementPlus
    var app = createApp({
        setup() {
            const ruleForm = reactive({
                ssdId:"",//薪酬标准主键
                standardId:"",//薪酬标准单号
                standardName:"",//薪酬标准名称
                designer:"",//制定人
                checker:window.userTrueName,//复核人
                checkTime:"",//复核时间
                salarySum:0.00,//薪酬总额
                checkComment:"",//复核意见
                register:"",//登记人
                registTime:"",//登记时间
                remark:"",//备注
                list:[],
                checkStatus:""//复核状态
            })
            //表单验证规则
            rules = reactive({
                // standardId:[
                //     { required: true, message: '薪酬标准单号不能为空', trigger: 'blur' },
                //     { validator: (rule, value, callback) => {
                //         if (value && value.toString().length !== 13) {
                //             callback(new Error('薪酬标准单号长度必须为十三位'));
                //         } else {
                //             callback();
                //         }
                //     },
                //     trigger: 'blur' }
                // ],
                standardName:[
                    { required: true, message: '薪酬标准名称不能为空', trigger: 'blur' },
                ],designer:[
                    { required: true, message: '制定人不能为空', trigger: 'blur' },
                ],checker:[
                    { required: true, message: '复核人不能为空', trigger: 'blur' },
                ],checkTime:[
                    { required: true, message: '复核时间不能为空', trigger: 'blur' },
                ],salarySum:[
                    { required: true, message: '薪酬总额不能为空', trigger: 'blur' },
                ],checkComment:[
                    { required: true, message: '复核意见不能为空', trigger: 'blur' },
                ],
            })
            let ruleFormRef = ref(null);//表单id
            const checkedCitiesList = ref([])
            const dialogVisible = ref(false)
            const standardId = ref("")
            const userData = ref()

            // 初始化一个变量来存储定时器的ID
            let intervalId;

            // 开始定时器，每一秒更新时间
            function startUpdatingTime() {
                // 清除已存在的定时器，防止多次启动
                clearInterval(intervalId);

                // 设置定时器，每一秒执行一次updateTime函数
                intervalId = setInterval(updateTime, 1000);
            }

            // 更新时间的函数
            function updateTime() {
                // 更新登记时间
                ruleForm.checkTime = new Date().toLocaleString();
            }

            // 启动定时器
            startUpdatingTime();

            function reset(){
                window.location.href = "/SS/Index2"
            }
            function close(){
                window.history.back();
            }

            function SSSelectById(){
                axios.get("/SS/SSSelectBySsdId").then(res =>{
                    ruleForm.standardId = res.data.standardId
                    ruleForm.standardName = res.data.standardName
                    ruleForm.salarySum = res.data.salarySum
                    ruleForm.remark = res.data.remark
                    ruleForm.designer = res.data.designer
                    ruleForm.ssdId = res.data.ssdId
                    standardId.value = res.data.standardId
                    ruleForm.register = res.data.register
                    ruleForm.registTime = res.data.registTime
                    ruleForm.remark = res.data.remark
                    axios.get("/SS/SSDSelectBySid",{
                        params:{
                            sid :ruleForm.standardId
                        }
                    }).then(res =>{
                        checkedCitiesList.value = res.data
                    }).catch(error =>{
                        console.info(error)
                    })
                }).catch(error =>{
                    console.info(error)
                })
            }
            SSSelectById()

            //通过复核
            function add(){
                ruleFormRef.value.validate((valid, fields) => {
                    if(valid){
                        const newCheckedCitiesList = checkedCitiesList.value.map(item => {
                            item.salary = parseFloat(item.salary),
                            item.standardId = ruleForm.standardId,
                            item.standardName = ruleForm.standardName
                            return item
                        });
                        checkedCitiesList.value = newCheckedCitiesList
                        ruleForm.list = newCheckedCitiesList
                        console.info(ruleForm.list)
                        // axios.get("/SS/SSSelectByIdAsync",{
                        //     params:{
                        //         id:ruleForm.standardId
                        //     }
                        // }).then(res =>{
                            // if(res.data == null || standardId.value == ruleForm.standardId){

                            console.info(ruleForm)
                                axios.put("/SS/SSThroughReviewAsync",{
                                    ssdId:ruleForm.ssdId,
                                    standardId:ruleForm.standardId,
                                    standardName:ruleForm.standardName,
                                    designer:ruleForm.designer,
                                    checker:ruleForm.checker,
                                    checkTime:ruleForm.checkTime,
                                    salarySum :ruleForm.salarySum,
                                    checkStatus:ruleForm.checkStatus,
                                    checkComment:ruleForm.checkComment,
                                    register :ruleForm.register,
                                    registTime :ruleForm.registTime,
                                    remark :ruleForm.remark
                                },{
                                    headers: {
                                        "Content-type": "application/x-www-form-urlencoded",
                                        //或其他格式
                                    },
                                }).then(res =>{
                                    console.info(res.data)
                                    if (res.data > 0){
                                        if(checkedCitiesList.value.length > 0){
                                            axios.put("/SS/SSDUpdateAsync", {
                                              sSDs: ruleForm.list
                                            },{
                                            headers: {
                                                "Content-type": "application/x-www-form-urlencoded",
                                                //或其他格式
                                            },
                                            }).then(res => {
                                                if(res.data > 0){
                                                    ElMessage({
                                                    type: 'success',
                                                    message: '提交成功！'});
                                                    setInterval(()=>{
                                                        reset()
                                                    },1000)
                                                    //dialogVisible.value = true
                                                }
                                            }).catch(Error => {
                                              console.info(Error);
                                            });
                                        }else{
                                            //reset()
                                            ElMessage({
                                            type: 'success',
                                            message: '提交成功！'});
                                            setInterval(()=>{
                                                reset()
                                            },1000)
                                            //dialogVisible.value = true
                                        }
                                    }
                                }).catch(error =>{
                                    console.info(error)
                                })

                        //     }else{
                        //         ElMessage({
                        //         type: 'error',
                        //         message: '该编号已存在！请修改后继续添加'});
                        //     }
                        // }).catch(Error =>{
                        //     console.info(Error)
                        // })
                    }
                })
            }

            let totalSum = ref(0); // 使用 ref 创建响应式引用

            // 计算属性，用于计算checkedCitiesList的总和
            const totalSumComputed = computed(() => {
              return checkedCitiesList.value.reduce((sum, item) => {
                // 确保转换成数字，如果salary不是数字，则默认为0
                return sum + parseFloat(item.salary) || 0;
              }, 0);
            });

            // 现在totalSumComputed会根据checkedCitiesList的变化自动更新
            // 如果你需要将计算出的总和赋值给另一个响应式变量，可以使用watchEffect或watch
            watchEffect(() => {
              totalSum.value = totalSumComputed.value.toFixed(2); // 更新totalSum并格式化为两位小数
              ruleForm.salarySum = totalSumComputed.value.toFixed(2);
            });

            function add2(){
                ruleFormRef.value.validate((valid, fields) => {
                    if(valid){
                        const newCheckedCitiesList = checkedCitiesList.value.map(item => {
                            item.salary = parseFloat(item.salary),
                            item.standardId = ruleForm.standardId,
                            item.standardName = ruleForm.standardName
                            return item
                        });
                        checkedCitiesList.value = newCheckedCitiesList
                        ruleForm.list = newCheckedCitiesList
                        console.info(ruleForm.list)
                        // axios.get("/SS/SSSelectByIdAsync",{
                        //     params:{
                        //         id:ruleForm.standardId
                        //     }
                        // }).then(res =>{
                            // if(res.data == null || standardId.value == ruleForm.standardId){
                                axios.put("/SS/SSThroughReviewAsync",{
                                    ssdId:ruleForm.ssdId,
                                    standardId:ruleForm.standardId,
                                    standardName:ruleForm.standardName,
                                    designer:ruleForm.designer,
                                    checker:ruleForm.checker,
                                    checkTime:ruleForm.checkTime,
                                    salarySum :ruleForm.salarySum,
                                    checkStatus:true,
                                    changeStatus:"未通过复核",
                                    checkComment:ruleForm.checkComment,
                                    register :ruleForm.register,
                                    registTime :ruleForm.registTime,
                                    remark :ruleForm.remark
                                },{
                                    headers: {
                                        "Content-type": "application/x-www-form-urlencoded",
                                        //或其他格式
                                    },
                                }).then(res =>{
                                    console.info(res.data)
                                    if (res.data > 0){
                                        if(checkedCitiesList.value.length > 0){
                                            axios.put("/SS/SSDUpdateAsync", {
                                              sSDs: ruleForm.list
                                            },{
                                            headers: {
                                                "Content-type": "application/x-www-form-urlencoded",
                                                //或其他格式
                                            },
                                            }).then(res => {
                                                // reset()
                                                if(res.data > 0){
                                                    ElMessage({
                                                    type: 'info',
                                                    message: '复核未通过！'});
                                                    //dialogVisible.value = true
                                                    setInterval(()=>{
                                                        reset()
                                                    },1000)
                                                }
                                            }).catch(Error => {
                                              console.info(Error);
                                            });
                                        }else{
                                            //reset()
                                            ElMessage({
                                            type: 'info',
                                            message: '复核未通过！'});
                                            //dialogVisible.value = true
                                            setInterval(()=>{
                                                reset()
                                            },1000)
                                        }
                                    }
                                }).catch(error =>{
                                    console.info(error)
                                })
                        //     }else{
                        //         ElMessage({
                        //         type: 'error',
                        //         message: '该编号已存在！请修改后继续添加'});
                        //     }
                        // }).catch(Error =>{
                        //     console.info(Error)
                        // })
                    }
                })
            }

            function userFill(){
                axios.get("/SS/UsersFill").then(res =>{
                    userData.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
            }
            userFill()

            function radio1(){
                ruleForm.checkComment = ruleForm.checkStatus
            }

            return {
                ruleForm,rules,ruleFormRef,add,totalSumComputed,totalSum,reset,checkedCitiesList,dialogVisible,standardId,close,add2,userData,radio1
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>
<style>
    body {
        background-color: #ffffcc;
    }

    .el-form-item__content {
        margin-left: 0px !important;
    }

    .el-form-item__error {
        color: var(--el-color-danger);
        font-size: 12px;
        left: 0;
        line-height: 1;
        padding-top: 2px;
        position: static !important;
        margin-left: 10px;
        top: 100%;
    }

    .el-form-item {
        display: flex;
        --font-size: 14px;
        margin-bottom: 0px !important;
    }

    tr .TD_STYLE2 {
        height: 46px
    }

    .btn {
        height: 25px;
        margin-top: -8px;
    }

</style>